namespace("controls.ModalDialog", {
	'@inherits'    : w3c.HtmlComponent,
	
	preInitialize : function(control, callback, options){
		try {
			this.control  = control;
			this.callback = callback||function(){};
			this.options  = options||{};
			this.setModel(this.options);
			this.setElement();
			this.modalize(this.control, this.options);
			this.initialize(this.control, this.callback, this.options); } 
		catch(e){
			alert(this.namespace + "#initialize() cause an error:\n" + e.message);
		}
		return this;
    },
	
	initialize : function(control, callback, options){
		var self=this;	
		this.addEventDelegate(".button-ok:click", function(e){self.OK(e, callback)}, false);
		this.addEventDelegate(".button-cancel:click", function(e){self.CANCEL(e, callback)}, false);
		this.addEventDelegate(".glass-overlay:click", function(e){self.CANCEL(e, callback)}, false);
	},
	
	OK : function(e, callback){
		this.setStyles({display:"none"});
		callback(e, true)
	},
	
	CANCEL : function(e, callback){
		this.setStyles({display:"none"});
		callback(e, false)
	},
	
	modalize : function(control, options){
		this.appendChild(control, ".content-pane");
		application.appendChild(this);
		this.setStyles({"z-index":application.absoluteZindex()});
		this.setStyles({width:xClientWidth()+"px", height:xClientHeight()+"px"}, this.querySelector(".glass-overlay"));
		//this.centerize(control, options.target||document.body);
	},
	
	centerize : function(control, parent){
		var self=this;
		var width = xGetComputedStyle(control,"width",1);//parseInt(this.getStyle("width",control));
		var height = xGetComputedStyle(control, "height", 1)
//		setTimeout(function(){
//			
//		}, 10);
//		alert("width:" + xGetComputedStyle(self.querySelector(".ConfirmDialog"), "top"))
		var top  = (xClientHeight()/2) - (height/2);
		var left = (xClientWidth()/2)  - (width/2);
		if(this.options.offSetTop)  {top = top + this.options.offSetTop};
		if(this.options.offSetLeft) {left = left + this.options.offSetLeft};
		
		//this.setStyles({left:left+"px", top:top +"px", position:"fixed"}, control);	
	},
	
	show : function(){
		this.setStyles({display:"block"});
		this.centerize(this.control, this.options.target||document.body);
	},
	
	innerHTML:
	'<div class="ModalDialog" style="position:absolute;">\
		<div class="glass-overlay" id="fade" style="display: block;"></div>\
		<div class="content-pane"></div>\
	</div>',
	
	cssText:
	'.ModalDialog {\
		border: 3px solid black;\
		display: none;\
		position: absolute;\
		top: 0;\
		left: 0;\
	}\
	.ModalDialog .black_overlay {\
		display: none;\
		position: absolute;\
		top: 0%;\
		left: 0%;\
		width: 100%;\
		height: 100%;\
		background-color: black;\
		z-index: 1001;\
		opacity: 0.0;\
		filter: alpha(opacity = .5);\
	}\
	.ModalDialog .white_content {\
		display: none;\
		border: 1px solid black;\
		background-color: white;\
		-moz-border-radius: 4px;\
		-webkit-border-radius: 4px;\
		left: 30%;\
		overflow: auto;\
		position: absolute;\
		top: 25%;\
		width: 500px;\
		height: 350px;\
		z-index: 1002;\
		-moz-box-shadow: 2px 2px 20px black;\
		-webkit-box-shadow: 2px 2px 20px black;\
	}\
	.ConfirmDialog {\
		width:300px;\
		position:fixed;\
		height:150px;\
		top:0px; left:0px;\
		-moz-box-shadow:0 8px 20px black;\
		-webkit-box-shadow:0px 8px 20px black;\
		-moz-border-radius:5px;\
		-webkit-border-radius:5px;\
		-opera-border-radius:5px;\
		-khtml-border-radius:5px;\
		background-color:#E3E3E3;\
		padding:3px;\
	}\
	.ConfirmDialog .msg{\
		line-height:18px;margin-left:5px;margin-top:1px;\
	}\
	.ConfirmDialog .dismissal-controls {\
		float:right;\
		margin-bottom:2px;\
		margin-right:4px;\
		margin-top:20px;\
		right:0;\
		top:0;\
	}'
});

